`<template>
  <div class="pore" v-loading="loadingFlag">
    <cus-Breadcrumb level1="字典列表管理" level2="字典列表  " class="mb20"></cus-Breadcrumb>
    <!-- 父字典列表 -->
    <el-card class="elCardStyle" shadow="hover" header="父字典显示区域">
      <div class="tipStyle">
        <i class="el-icon-view"></i>
        单击某一行即可在右侧显示对应子字典
      </div>
      <!-- 点击添加父字典 -->
      <el-button class="addFather" size="mini" @click="showAdd" v-if="zdAdd">点击添加父字典</el-button>
      <!-- <div
        class="loading"
        v-show="showFatherLoading"
      ><i class="el-icon-loading"></i></div>-->
      <el-table
        :data="fatherDicList"
        style="width: 100%"
        class="fl"
        :highlight-current-row="true"
        @row-click="loadChildList"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="名称" width="140">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click.stop="showEditFather(scope.row.name, scope.row.id,scope.row.keyName)"
              v-if="zdEdit"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click.stop="DleteFatherDictionary(scope.row.id)"
              v-if="zdDelete"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 子节点显示区域 -->
    <el-card class="cardStyle pore" header="子字典显示区域" shadow="hover">
      <el-button class="addFather" size="mini" @click="showAddChild" v-if="childFlag && childAdd">点击添加子字典</el-button>
      <el-table
        :data="childDicList"
        :default-sort="{prop: 'date', order: 'descending'}"
        v-if="childFlag"
      >
        <el-table-column prop="content" label="子字典名称" sortable width="180"></el-table-column>
        <el-table-column prop="createTime" label="日期" sortable width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{scope.row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click.stop="showEditChild(scope.row.id,scope.row.content,scope.row.alias,scope.row.keyName)"
              v-if="childEdit"
            >编辑</el-button>
            <!-- <el-button
              size="mini"
              type="danger"
              @click.stop="deleteChildDictionary(scope.row.id,scope.row.keyName)"
            >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增父字典弹出层 -->
    <el-dialog title="新增父字典" :visible.sync="addShow">
      <el-form status-icon ref="ruleForm2" label-width="140px" class="demo-ruleForm">
        <el-form-item label="输入父字典关键字">
          <el-input
            type="text"
            autocomplete="off"
            placeholder="仅支持英文且长度不超过10"
            v-model="fatherForm.keyName"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入父字典名称">
          <el-input
            type="text"
            autocomplete="off"
            placeholder="请输入不超过10个中文汉字长度"
            v-model="fatherForm.name"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewFather">确 定</el-button>
        <el-button @click="addShow=false;">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增子字典弹出层 -->
    <el-dialog title="新增子字典" :visible.sync="addChild">
      <el-form status-icon ref="ruleForm2" label-width="140px" class="demo-ruleForm">
        <el-form-item label="预添加至父字典">
          <el-input
            type="text"
            autocomplete="off"
            placeholder
            :disabled="true"
            v-model="whereToAdd"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入子字典别名">
          <el-input
            type="text"
            autocomplete="off"
            placeholder="仅支持英文且长度不超过10"
            v-model="childForm.alias"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入子字典名称">
          <el-input
            type="text"
            autocomplete="off"
            v-model="childForm.content"
            placeholder="请输入不超过10个中文汉字长度"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewChild">确 定</el-button>
        <el-button @click="addChild = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑父字典 -->
    <el-dialog title="编辑父字典" :visible.sync="editFather">
      <el-form status-icon ref="ruleForm2" label-width="140px" class="demo-ruleForm">
        <el-form-item label="父字典关键字">
          <el-input
            type="text"
            autocomplete="off"
            :disabled="true"
            v-model="editFatherform.keyName"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入父字典名称">
          <el-input type="text" autocomplete="off" v-model="editFatherform.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="editFatherDictionary(editFatherform.name,editFatherform.id)"
        >确 定</el-button>
        <el-button @click="editFather = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑子字典 -->
    <el-dialog title="编辑子字典" :visible.sync="editChild">
      <el-form status-icon ref="ruleForm2" label-width="140px" class="demo-ruleForm">
        <el-form-item label="子字典关键字">
          <el-input type="text" autocomplete="off" :disabled="true" v-model="ChildForm2.alias"></el-input>
        </el-form-item>
        <el-form-item label="更改子字典名称">
          <el-input type="text" autocomplete="off" v-model="ChildForm2.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="editChildDictionary(ChildForm2.keyName,ChildForm2.content,ChildForm2.id)"
        >确 定</el-button>
        <el-button @click="editChild = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $$ from '@/plugins/statusCode.config'
export default {
  data () {
    return {
      zdAdd: false,
      zdEdit: false,
      zdDelete: false,
      childAdd: false,
      childEdit: false,
      loadingFlag: true,
      ChildForm2: {},
      fatherDicList: [],
      showFatherLoading: false,
      showLoadingChild: false,
      childDicList: [],
      fatherDicListinChild: [],
      editChild: false,
      editFatherform: {},
      childFlag: false,
      addShow: false,
      addChild: false,
      editFather: false,
      fatherForm: {
        name: '',
        keyName: ''
      },
      childForm: {
        keyName: '',
        content: '',
        parentId: '',
        alias: ''
      },
      childRefresh: '',
      whereToAdd: '',
      rows: '',
      ids: '',
      id2: '',
      keyName2: '',
      name3: '',
      id3: '',
      keyname4: '',
      content4: '',
      id4: ''
    }
  },
  mounted () {
    this.loadingFlag = true
    this.loadFatherList()
    this.role()
  },
  created () {
    this.showLoading = true
    const token = sessionStorage.getItem('accessToken')
    if (!token) {
      this.$message.warning('请先登录')
      this.$router.push({ name: 'login' })
    }
    this.managerNickName = sessionStorage.getItem('managerNickName')
  },
  methods: {
    role () {
      let arr = JSON.parse(sessionStorage.getItem('buttonRole'))
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === 'zd-add') {
          this.zdAdd = true
        }
        if (arr[i] === 'zd-edit') {
          this.zdEdit = true
        }
        if (arr[i] === 'zd-delete') {
          this.zdDelete = true
        }
        if (arr[i] === 'child-add') {
          this.childAdd = true
        }
        if (arr[i] === 'child-edit') {
          this.childEdit = true
        }
      }
    },
    // 渲染父字典
    async loadFatherList () {
      const that = this
      await this.$http8081
        .post(`/dictionary-search/flipListForParent`)
        .then(function (res) {
          if (res.data.statusCode === $$.s20006) {
            that.loadingFlag = false
            that.fatherDicList = res.data.data
            that.fatherDicListinChild = res.data.data
            that.$message.success(res.data.statusMsg)
          }
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.loadFatherList()
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
        })
    },
    // 渲染子字典
    async loadChildList (row) {
      this.rows = row
      this.whereToAdd = this.rows.name
      this.childForm.keyName = this.rows.keyName
      this.childForm.parentId = this.rows.id
      this.loadingFlag = true
      // 获取父字典关键字和parentId
      const that = this
      let param = new URLSearchParams()
      param.append('keyName', this.rows.keyName)
      await this.$http8081
        .post(`/dictionary-search/flipListByKeyName`, param)
        .then(function (res) {
          if (res.data.statusCode === $$.s20006) {
            that.loadingFlag = false
            that.childFlag = true
            that.childDicList = res.data.data
            that.$message.success(res.data.statusMsg)
          }
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.loadFatherList(_that.rows)
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
        })
    },
    // 添加父字典
    showAdd () {
      this.addShow = true
    },
    async addNewFather () {
      var keyNameasc = /^[a-zA-Z][a-zA-Z0-9 _]{1,10}$/
      if (!this.fatherForm.keyName) {
        this.$message.error('请输入父节点关键字')
      } else if (
        this.fatherForm.keyName &&
        keyNameasc.test(this.fatherForm.keyName)
      ) {
        if (!this.fatherForm.name) {
          this.$message.error('请输入父字典名称')
        } else {
          const that = this
          let param = new URLSearchParams()
          param.append('name', this.fatherForm.name)
          param.append('keyName', this.fatherForm.keyName)
          this.loadingFlag = true
          await this.$http8080
            .post(`/dictionary-operate/saveParent`, param)
            .then(function (res) {
              if (res.data.statusCode === $$.s70003) {
                const id = sessionStorage.getItem('id')
                let param = new URLSearchParams()
                param.append('id', id)
                const _that = that
                return that.$refresh
                  .post(`/manager-search/updateToken`, param)
                  .then(function (res) {
                    if (res.data.statusCode === $$.s70005) {
                      sessionStorage.setItem(
                        'accessToken',
                        res.data.data.accessToken
                      )
                      sessionStorage.setItem(
                        'refreshToken',
                        res.data.data.refreshToken
                      )
                      _that.addNewFather()
                    }
                    if (res.data.statusCode === $$.s70003) {
                      sessionStorage.clear()
                      _that.$router.push({ name: 'login' })
                      _that.$message.success('登陆超时请重新登陆')
                    }
                  })
              }
              if (res.data.statusCode === 20000) {
                that.loadingFlag = false
                that.fatherForm.name = ''
                that.fatherForm.keyName = ''
                that.$message.success(res.data.statusMsg)
                that.addShow = false
                that.loadFatherList()
              } else {
                that.$message.error(res.data.statusMsg)
              }
            })
        }
      } else {
        this.$message.error(
          '仅支持输入英文、数字、下划线,且长度不能超过10,请重新输入'
        )
        this.fatherForm.keyName = ''
      }
    },
    // 添加子字典
    showAddChild () {
      this.addChild = true
    },
    async addNewChild () {
      var keyNameasc = /^[a-zA-Z][a-zA-Z0-9 _]{1,10}$/
      if (!this.childForm.alias) {
        this.$message.error('请输入子节点别名')
      } else if (
        this.childForm.alias &&
        keyNameasc.test(this.childForm.alias)
      ) {
        if (!this.childForm.content) {
          this.$message.error('请输入子字典名称')
        } else {
          const that = this
          let param = new URLSearchParams()
          param.append('keyName', this.childForm.keyName)
          param.append('content', this.childForm.content)
          param.append('parentId', this.childForm.parentId)
          param.append('alias', this.childForm.alias)
          this.loadingFlag = true
          await this.$http8080
            .post(`/dictionary-operate/saveChild`, param)
            .then(function (res) {
              if (res.data.statusCode === $$.s70003) {
                const id = sessionStorage.getItem('id')
                let param = new URLSearchParams()
                param.append('id', id)
                const _that = that
                return that.$refresh
                  .post(`/manager-search/updateToken`, param)
                  .then(function (res) {
                    if (res.data.statusCode === $$.s70005) {
                      sessionStorage.setItem(
                        'accessToken',
                        res.data.data.accessToken
                      )
                      sessionStorage.setItem(
                        'refreshToken',
                        res.data.data.refreshToken
                      )
                      _that.addNewChild()
                    }
                    if (res.data.statusCode === $$.s70003) {
                      sessionStorage.clear()
                      _that.$router.push({ name: 'login' })
                      _that.$message.success('登陆超时请重新登陆')
                    }
                  })
              }
              if (res.data.statusCode === 20000) {
                that.loadingFlag = false
                that.$message.success(res.data.statusMsg)
                that.addChild = false
                let param1 = new URLSearchParams()
                param1.append('keyName', that.childForm.keyName)
                that.showLoadingChild = true
                that.$http8081
                  .post(`/dictionary-search/flipListByKeyName`, param1)
                  .then(function (res) {
                    if (res.data.statusCode === $$.s70003) {
                      const id = sessionStorage.getItem('id')
                      let param = new URLSearchParams()
                      param.append('id', id)
                      const _that = that
                      return that.$refresh
                        .post(`/manager-search/updateToken`, param)
                        .then(function (res) {
                          if (res.data.statusCode === $$.s70005) {
                            sessionStorage.setItem(
                              'accessToken',
                              res.data.data.accessToken
                            )
                            sessionStorage.setItem(
                              'refreshToken',
                              res.data.data.refreshToken
                            )
                          }
                          if (res.data.statusCode === $$.s70003) {
                            sessionStorage.clear()
                            _that.$router.push({ name: 'login' })
                            _that.$message.success('登陆超时请重新登陆')
                          }
                        })
                    }
                    if (res.data.statusCode === $$.s20006) {
                      that.showLoadingChild = false
                      that.childFlag = true
                      that.childDicList = res.data.data
                    }
                  })
                that.childForm.keyName = ''
                that.childForm.content = ''
                that.childForm.parentId = ''
                that.childForm.alias = ''
              } else {
                that.$message.error(res.data.statusMsg)
              }
            })
        }
      } else {
        this.$message.error(
          '仅支持输入英文、数字、下划线,且长度不能超过10,请重新输入'
        )
        this.childForm.alias = ''
      }
    },
    // 删除父字典
    async DleteFatherDictionary (id) {
      this.ids = id
      const that = this
      let param = new URLSearchParams()
      param.append('id', this.ids)
      this.loadingFlag = true
      await this.$http8080
        .post(`/dictionary-operate/removeParent`, param)
        .then(function (res) {
          that.loadFatherList()
          that.loadingFlag = false
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.DleteFatherDictionary(_that.ids)
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
          if (res.data.statusCode === 20004) {
            that.$message.success(res.data.statusMsg)
          } else {
            that.$message.error(res.data.statusMsg)
          }
        })
    },
    // 删除子字典 （废除）
    // async deleteChildDictionary (id, keyName) {
    //   this.id2 = id
    //   this.keyName2 = keyName
    //   const that = this
    //   const key = keyName
    //   let param = new URLSearchParams()
    //   param.append('id', this.id2)
    //   param.append('keyName', this.keyName2)
    //   this.loadingFlag = true
    //   await this.$http8080.post(`/dictionary-operate/removeChild`, param).then(function (res) {
    //     if (res.data.statusCode === $$.s70003) {
    //       const id = sessionStorage.getItem('id')
    //       let param = new URLSearchParams()
    //       param.append('id', id)
    //       const _that = that
    //       return that.$refresh.post(`/manager-search/updateToken`, param).then(function (res) {
    //         if (res.data.statusCode === $$.s70005) {
    //           sessionStorage.setItem('accessToken', res.data.data.accessToken)
    //           sessionStorage.setItem('refreshToken', res.data.data.refreshToken)
    //           _that.deleteChildDictionary(_that.id2, _that.keyName2)
    //         }
    //         if (res.data.statusCode === $$.s70003) {
    //           sessionStorage.clear()
    //           _that.$router.push({ name: 'login' })
    //           _that.$message.success('登陆超时请重新登陆')
    //         }
    //       })
    //     }
    //     if (res.data.statusCode === 20004) {
    //       that.$message.success(res.data.statusMsg)
    //       let param1 = new URLSearchParams()
    //       param1.append('keyName', key)
    //       that.loadingFlag = false
    //       that.$http8081.post(`/dictionary-search/flipListByKeyName`, param1).then(function (res) {
    //         if (res.data.statusCode === $$.s20006) {
    //           that.showLoadingChild = false
    //           that.childFlag = true
    //           that.childDicList = res.data.data
    //         }
    //       })
    //     } else {
    //       that.$message.error(res.data.statusMsg)
    //     }
    //   })
    // },
    // 编辑父字典
    showEditFather (name, id, keyName) {
      this.editFather = true
      this.editFatherform.name = name
      this.editFatherform.id = id
      this.editFatherform.keyName = keyName
    },
    async editFatherDictionary (name, id) {
      this.name3 = name
      this.id3 = id
      const that = this
      let param = new URLSearchParams()
      param.append('name', this.name3)
      param.append('id', this.id3)
      this.loadingFlag = true
      await this.$http8080
        .post(`/dictionary-operate/modifyParent`, param)
        .then(function (res) {
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.editFatherDictionary(_that.name3, _that.id3)
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
          if (res.data.statusCode === $$.s20002) {
            that.$message.success(res.data.statusMsg)
            that.editFather = false
            that.loadingFlag = false
            that.loadFatherList()
          } else {
            that.$message.error(res.data.statusMsg)
          }
        })
    },
    // 编辑子字典
    showEditChild (id, content, alias, keyName) {
      this.editChild = true
      this.ChildForm2.id = id
      this.ChildForm2.content = content
      this.ChildForm2.alias = alias
      this.ChildForm2.keyName = keyName
    },
    async editChildDictionary (keyname, content, id) {
      this.keyname4 = keyname
      this.content4 = content
      this.id4 = id
      const that = this
      const key = keyname
      let param = new URLSearchParams()
      param.append('content', this.content4)
      param.append('keyName', this.keyname4)
      param.append('id', this.id4)
      this.loadingFlag = true
      await this.$http8080
        .post(`/dictionary-operate/modifyChild`, param)
        .then(function (res) {
          if (res.data.statusCode === $$.s70003) {
            const id = sessionStorage.getItem('id')
            let param = new URLSearchParams()
            param.append('id', id)
            const _that = that
            return that.$refresh
              .post(`/manager-search/updateToken`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s70005) {
                  sessionStorage.setItem(
                    'accessToken',
                    res.data.data.accessToken
                  )
                  sessionStorage.setItem(
                    'refreshToken',
                    res.data.data.refreshToken
                  )
                  _that.editChildDictionary(
                    _that.keyname4,
                    _that.content4,
                    _that.id4
                  )
                }
                if (res.data.statusCode === $$.s70003) {
                  sessionStorage.clear()
                  _that.$router.push({ name: 'login' })
                  _that.$message.success('登陆超时请重新登陆')
                }
              })
          }
          if (res.data.statusCode === $$.s20002) {
            that.$message.success(res.data.statusMsg)
            let param = new URLSearchParams()
            param.append('keyName', key)
            that.showLoadingChild = true
            that.$http8081
              .post(`/dictionary-search/flipListByKeyName`, param)
              .then(function (res) {
                if (res.data.statusCode === $$.s20006) {
                  that.loadingFlag = false
                  that.showLoadingChild = false
                  that.childFlag = true
                  that.childDicList = res.data.data
                  that.$message.success(res.data.statusMsg)
                }
              })
            that.editChild = false
            that.childFlag = false
          } else {
            that.$message.error(res.data.statusMsg)
          }
        })
    }
  }
}
</script>

<style>
.elCardStyle {
  width: 49%;
  height: 866px;
  position: relative;
}
.cardStyle {
  width: 49%;
  height: 866px;
  position: absolute;
  right: 0;
  top: 34px;
}
.closeBtn {
  font-size: 30px;
  color: rgb(245, 108, 108);
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.position {
  width: 15px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 49.4%;
  font-size: 20px;
  font-weight: 700;
  color: rgb(84, 92, 100);
}
.el-dialog {
  width: 65%;
}
.tipStyle {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 16px;
  color: #666;
}
.addFather {
  width: 100%;
}
.el-icon-loading {
  font-size: 50px;
  color: #ccc;
}
.loading {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
</style>
